/*
 * @Description: 我的车票里的车票组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:50:30
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-24 23:00:18
 */
<template>
  <div
    class="ticket_main flex-h flex-hsb fontsize32"
    @click="skipToTicketInfo"
  >
    <div
      class="type"
      :style="{color: ticketType.color}"
    >
      <i class="iconfont icon-bus fontsize60"></i>
      <p class="fontsize28">{{ticketType.text}}</p>
    </div>
    <div class="info">
      <p class="route-name fontsize32">{{this.ticket.ROUTE_NAME}}</p>
      <p class="station fontsize28 flex1">{{this.ticket.START_STATION_NAME}}&nbsp;&nbsp;→&nbsp;&nbsp;{{this.ticket.END_STATION_NAME}}</p>
      <p class="time fontsize24">班次：{{this.ticket.TRAIN_NUM}}</p>
    </div>
    <div class="broken">
      <div class="circle top"></div>
      <div class="circle bottom"></div>
    </div>
    <div class="tag">
      <img :src="ticketType.tag">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    ticket: { //  车票数据
      type: Object,
      default: function () {
        return {
          DEPART_TIME: 0,
          END_STATION_NAME: '',
          END_TIME: 0,
          ROUTE_NAME: '',
          START_STATION_NAME: '',
          START_TIME: 0,
          TICKET_DATE_TYPE: 0,
          TICKET_TYPE_ID: 0,
          DEPARTURE: ''
        }
      }
    }
  },
  data() {
    return {
      ticketTypeData: {
        tag: [ // 存储车票三种状态对应的图片
          '',
          '',
          require('@wechat/img/used.png'),
          require('@wechat/img/overdue.png'),
          require('@wechat/img/dishonour.png')
        ],
        color: ['#027aff', '#836bff', '#0ecce6'], // 存储不同状态车票图标颜色
        text: ['日票', '周票', '月票']
      },
      ticketType: {
        tag: '',
        color: '',
        text: ''
      }
    }
  },
  mounted() {
    this.getType()
    this.getDeparture()
  },
  methods: {
    skipToTicketInfo() { // 跳转车票信息页
      window.localStorage.setItem('my_ticket', JSON.stringify(this.ticket))
      this.$router.push({ path: 'ticket' })
    },
    getType() { // 获取当前车票状态以及车票类型并设置右上角标签左侧颜色与文本
      this.ticketType.text = this.ticketTypeData.text[this.ticket.TICKET_DATE_TYPE - 1]
      this.ticketType.color = this.ticketTypeData.color[this.ticket.TICKET_DATE_TYPE - 1]
      this.ticketType.tag = this.ticketTypeData.tag[this.ticket.TICKET_STATE]
    },
    getDeparture() {
      let start = this.timeFormate(this.ticket.START_TIME)
      let end = this.timeFormate(this.ticket.END_TIME)
      let hhmm = this.hhmmFormat(this.ticket.DEPART_TIME_HHMM)
      this.ticket.DEPARTURE = parseInt(this.ticket.TICKET_DATE_TYPE) === 1 ? start + hhmm : start + ' - ' + end + hhmm
    },
    timeFormate(value) {
      let time = new Date(value)
      let year = time.getFullYear()
      let month = (time.getMonth() + 1) // .toString().padStart(2, '0')
      let day = time.getDate() // .toString().padStart(2, '0')
      return `${year}年${month}月${day}日`
    },
    hhmmFormat(value) {
      return value.substring(0, 2) + ':' + value.substring(2, 4)
    }
  }
}
</script>

<style lang="scss" scoped>
.ticket_main {
  width: 686px;
  margin: 32px auto 0;
  // margin-top: 0;
  background-color: #fff;
  border-radius: 4px; /*no*/
  padding: 16px 0;
  position: relative;
  .type {
    width: 134px;
    text-align: center;
    margin-top: 26px;
    i {
      height: 60px;
    }
    p {
      height: 40px;
      line-height: 40px;
    }
  }
  .info {
    width: 520px;
    padding-left: 32px;
    .route-name {
      height: 44px;
      line-height: 44px;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .station {
      height: 40px;
      line-height: 40px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .time {
      height: 28px;
      line-height: 28px;
      margin-top: 4px;
      margin-bottom: 32px;
      color: #999;
    }
  }
  .broken {
    width: 0;
    height: 195px;
    position: absolute;
    top: 0;
    left: 133px;
    border: 2px dashed #ccc;
    .circle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #f2f5f6;
      position: absolute;
      left: -17px;
    }
    .top {
      top: -20px;
    }
    .bottom {
      bottom: -20px;
    }
  }
  .tag {
    width: 100px;
    position: absolute;
    right: 0;
    top: 0;
    img {
      width: 100%;
    }
  }
}
</style>
